<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/16
  Time: 16:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>酒店展示</title>
    <script src="../js/jquery-2.1.0.js"></script>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
    <style>
        table{
            margin: auto;
        }
        #roomtype{
            width: 200px;
        }
        #top{
            border: 1px solid white;
            height: 60px;
        }
        #top1{
            border: 0px solid red;
            width:100px;
            height: 40px;
            float: right;
            line-height: 40px;
        }
        #top2{
            border: 0px solid red;
            width:70px;
            height: 40px;
            float: right;
            line-height: 40px;
        }
        #top3{
            border: 1px solid red;
            width:70px;
            height: 40px;
            float: right;
            line-height: 40px;
        }
        a{
            font-size: 20px;
        }

    </style>

</head>
<body>


<section>
    <div>
        <div id="top">
            <c:if test="${uname !=null}">
                <div id="top2"><a href="${pageContext.request.contextPath}/webdenglu?method=out">退出</a></div>
                <div id="top1"><a href="${pageContext.request.contextPath}/user/gerenshow.jsp">欢迎${uname}</a></div>
            </c:if>
            <c:if test="${uname ==null}">
                <div id="top2"><a href="${pageContext.request.contextPath}/webdenglu?method=out">退出</a></div>
                <div id="top1"><a href="${pageContext.request.contextPath}/qianduan/webdenglu.jsp">登录</a></div>
            </c:if>
        </div>
    </div>
<div class="layui-carousel" id="test2" style="margin-top: 15px;margin-left: 300px">
    <div carousel-item="">
        <div><img src="${pageContext.request.contextPath}/img/wallhaven-6q9zpx.jpg" style="width: 1320px;height: 700px"/></div>
        <div><img src="${pageContext.request.contextPath}/img/wallh.jpg" style="width: 1320px;height: 700px"></div>
        <div><img src="${pageContext.request.contextPath}/img/wallhaven-n6dwoq.jpg" style="width: 1320px;height: 700px"></div>
        <div><img src="${pageContext.request.contextPath}/img/wallhaven-n673ww.jpg" style="width: 1320px;height: 700px"></div>
        <div><img src="${pageContext.request.contextPath}/img/wallhaven-4xwglz.jpg" style="width: 1320px;height: 700px"></div>
        <div><img src="${pageContext.request.contextPath}/img/wallhaven-vgl785.jpg" style="width: 1320px;height: 700px"></div>
    </div>
</div>
<%--下拉框--%>
<form class="layui-form" action="" style="margin-top: 15px">
            <div class="layui-form-item">
                <label class="layui-form-label">房间类型</label>
                <div class="layui-input-block">
                    <select id="roomtype" name="deptid">

                    </select>


                </div>
            </div>
    </form>
</section>








    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确定按钮</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<div style="border: 1px solid red; width: 1920px;height: 200px">

    <table border="1" cellspacing="1" width="1920px" >
        <%--根据房间类型 显示所有当前类型的房间号--%>
        <tbody id="room">

        </tbody>
    </table>

</div>






<selection id="typedetail">
    <div class="container" style="height: 600px">
        <div class="explore-content">
            <center><h2><span id="fjlx"></span></h2></center><br/>
            <center><h2>房间详情</h2></center>
            <div class="container">
                <div class="row">


                    <div class="col-md-4 col-sm-6" style="float: left;margin-left: 400px;border: 1px solid blue">
                        <div class="single-explore-item">
                            <div class="single-explore-img">
                                <img src="${pageContext.request.contextPath}/img/wallhaven-vmd923.jpg" alt="explore image" style="width: 350px;height: 225px">
                                <div class="single-explore-img-info">
                                    <button  class="typename"></button>
                                </div>
                            </div>
                            <div class="single-explore-txt bg-theme-5">
                                <h2><a  class="typename"></a></h2>
                                <p class="explore-rating-price">
                                    <span>￥<span class="money"></span>/晚</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <%--房间设施开始--%>

                    <div class="col-md-4 col-sm-6" id="sheshixiangqing" style="float: left;margin-left: 120px;border: 1px solid slateblue">
                        房间设施:<br>


                    </div>

                    <%--房间设施结束--%>

                    <%--预定div开始--%>
                    <div class="col-md-4 col-sm-6" style="float: left;margin-left: 150px;border: 1px solid darkmagenta">
                        <div class="layui-form">
                            <input type="text" id="rzdate" name="rzdate"/>
                            <input type="text" id="leavedate" name="leavedate">
                            <input type="text"  id="roomtype2" name="roomtype">
                            <input type="text" id="username" name="username" value="${sessionScope.uname}
">
                            <div class="layui-form-item">
                                <label class="layui-form-label">名字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入名字" autocomplete="off" class="layui-input">
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">电话</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="tel" required lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="count" id="count" required lay-verify="number" placeholder="请输入数量" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <!--从后台获取时间-->
                            <div class="layui-form-item">
                                <label class="layui-form-label">时间</label>
                                <div id="test3"></div>
                            </div>

                            <!--获取总价-->
                            <div class="layui-form-item">
                                <label class="layui-form-label">总价</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="price" id="price" required lay-verify="number" placeholder="总价为" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo1">预定</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <%--预定div结束--%>
                </div>
            </div>
        </div>








    </div>


    <!--[if IE]>

    <![endif]-->

</selection>










<script>




    layui.use('jquery',function (){
        var $ = layui.jquery;


    $(function (){

        $.ajax({
            url:"${pageContext.request.contextPath}/webdenglu?method=room"
            ,type: "post"
            ,dataType: "JSON"
            ,success:function (r){
                //alert(r);
                // for (var i=0;i<r.length;ret++){
                //
                //     tr+="<tr>";
                //       for (var j=0;j<ret.size();i++){
                //           tr+="<td id='"+ret[j].typeid+"'>"+ret[j].roomcode+","+ret[j].status+","+ret[j].name+","+ret[j].yajin+","+ret[j].fangfei+"</td>";
                //
                //       }
                //       tr+="</tr>";
                // }


                // var tr="<tr>";
                // $.each(r,function (index,item){
                //     tr+="<td id='"+item.typeid+"'>";
                //     // $.each(item,function (index1,item1){
                //         tr+=item.roomcode+","+item.status+","+item.name+","+item.yajin+","+item.fangfei;
                //     // })
                //     tr+="</td>";
                // })
                // tr+="</tr>";
                //    $("#room").append(tr);


                var tr="<tr style='text-align: center'>";
                $.each(r,function (index,item){

                    tr+="<td id='"+item.id+"'>";
                    // $.each(item,function (index1,item1){
                    tr+=item.tname;
                    tr+="<img class='imgshow' src='/img/"+item.id+".jpg' style='width: 200px;height: 150px'/>"
                    // })
                    tr+="<input type='hidden' value='"+item.id+"'/>"
                    tr+="</td>";
                })
                tr+="</tr>";
                $("#room").append(tr);

            },error:function (){
                alert("错误");
            }


        })
    });
    });
</script>



<script>
    var syAndMaxDate = "";

    layui.use(['carousel', 'form','jquery','layer','laydate'], function(){
        var carousel = layui.carousel
            ,form = layui.form
            ,$ = layui.jquery
            ,layer = layui.layer
            ,laydate = layui.laydate;
            $("#typedetail").hide();








        $(".imgshow").on("click",function (){
            $("#test3").empty();
            $("#price").val("");


            layer.open({
                type: 1,
                title:'订单信息',
                skin: 'layui-layer-rim', //加上边框
                area: ['1920px', '800px'], //宽高
                content: $("#typedetail")
            });

                var typeid=$(this).next('input').val();
                alert(typeid);
            $.ajax({
               url:"/xiangqing",
               data:{typeid:typeid},
                type:"post",
                dataType:"JSON",
                success:function (ret){

                   //alert(ret);
                   //var data = ret.list;
                   $("#sheshixiangqing").empty();
                    var span = "";
                   // $.forEach(data,function (index,item){
                   //     span+="<span>"+item+"</span><br/>"
                   // })
                    for (let i = 0; i < ret.length; i++) {
                        span+="<span>"+ret[i]+"</span><br/>"
                    }
                    $("#sheshixiangqing").append(span);

                },error:function (){
                   alert("错误");
                }
            });

            var rtype = "";
            $.ajax({
                url:"/jdtype",
                data:{typeid:typeid},
                type:"post",
                async:false,
                dataType:"JSON",
                success:function (ret){
                     rtype = ret.rtype;
                    alert(JSON.stringify(ret));
                    //alert(JSON.stringify(ret))
                    $(".money").text(rtype.money);
                    $("#fjlx").text(rtype.tname);
                    $("#roomtype2").val(rtype.id);
                    //获取到的是已满房间时间和剩余房间的时间和数量
                    syAndMaxDate = ret.orderMess;


                },error:function (){
                    alert("错误");
                }
            });

            if (syAndMaxDate!="" && syAndMaxDate!=null){
            var mark = {};
            var maxDate = syAndMaxDate.maxDate;
            for (let i = 0; i < maxDate.length; i++) {
                var aaa=maxDate[i].split("-");
               // mark[maxDate[i]]=aaa[2] ;
                mark[maxDate[i]]='满房' ;
            }
            alert(JSON.stringify(maxDate));

            /**
             * 日期表格组件
             */
            laydate.render({
                elem: '#test3',
                min: 0,
                position: 'static',
                range: '~',
                theme: '#393D49',
                showBottom: false,
                mark:mark,
                ready:function (){
                    var elem = $(".layui-laydate-content");
                    layui.each(elem.find('tr'),function (trIndex,trElem){
                        layui.each($(trElem).find('td'),function (tdIndex,tdElem){
                            var tdTemp = $(tdElem);
                            for (let i = 0; i < maxDate.length; i++) {
                                if (tdTemp.children('span').hasClass('laydate-day-mark')){
                                        tdTemp.addClass('laydate-disabled');
                                }

                            }
                        });
                    });


                },
                change: function(value, date, endDate){
                    var value1=value.split("~");
                    var rztime= value1[0].trim().replace(/-/g, "/");
                    var leavedate=value1[1].replace(/-/g, "/");

                    var startTime = value1[0].trim();
                    var endTime = value1[1];
                    var s= Date.parse(rztime);
                    var e= new Date(leavedate).getTime();

                    var d = (Number(e)-Number(s)) / (1000 * 60 * 60 *24);
                    let val = $("#count").val();
                    $("#price").val(d*rtype.money*val);
                    if (d > 15){
                        layer.msg("最多选择15天");
                    }else {
                        $("#rzdate").val(startTime);
                        $("#leavedate").val(endTime);

                    }


                }
            });


            }else {
                laydate.render({
                    elem: '#test3',
                    min: 0,
                    position: 'static',
                    range: '~',
                    theme: '#393D49',
                    showBottom: false,
                    mark:mark,
                    change: function(value, date, endDate){
                        var value1=value.split("~");
                        var rztime= value1[0].trim().replace(/-/g, "/");
                        var leavedate=value1[1].replace(/-/g, "/");

                        var startTime = value1[0].trim();
                        var endTime = value1[1];
                        var s= Date.parse(rztime);
                        var e= new Date(leavedate).getTime();
                        var d = (Number(e)-Number(s)) / (1000 * 60 * 60 *24);
                        let val = $("#count").val();
                        $("#price").val(d*rtype.money*val);
                        if (d > 15){
                            layer.msg("最多选择15天");
                        }else {
                            $("#rzdate").val(startTime);
                            $("#leavedate").val(endTime);

                        }
                    }
                });
            }




        });












        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            ,interval: 1000
            ,anim: 'fade'
            ,width: '1320px'
            ,height: '750px'
        });






        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //ajax把你所获取到的值赋值给下拉框
        $.ajax({
            url:"${pageContext.request.contextPath}/qwer?method=all",
            data:{},
            type:"post",
            dataType:"JSON",
            success:function (r){
                var option="";
                for (var i = 0;i<r.length;i++){
                    option+="<option value='"+r[i].id+"'>"+r[i].tname+"</option>";
                }
                $("#roomtype").append(option);

                form.render("select");
            },error:function (){
                alert("错了")
            }
        })





        //展现表格，表格第一列是图片后面是t_type房间类型的表格;









        //监听提交
        form.on('submit(formDemo1)', function(data){
            //layer.msg(JSON.stringify(data.field))
            let val1 = $("#username").val();
            if (val1==null || val1==""){
                location.href="${pageContext.request.contextPath}/qianduan/webdenglu.jsp";
            }else {
                $.ajax({
                    url:"/addOrder",
                    data:data.field,
                    async:true,
                    success:function(r){
                        if(parseInt(r)>0){
                            alert("预订成功")
                            //layer.msg("祝贺您，预定成功！！！");
                            layer.closeAll();
                            //getDetail(null,data.field.roomtype);
                        }else{
                            //alert("预定失败")
                            layer.msg("房间不足，请您修改房间的数量之后重新提交！！！！");
                        }
                    }

                });
                return false;
                /*return false;*/
            }


        });



    });



</script>




</body>
</html>
